布局;

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
function Header() {
  return <div>Header</div>;
}
function Main() {
  return <div>Main</div>;
}
function Footer() {
  return <div>Footer</div>;
}
// 1. 函数组件 布局可以适当 React.memo 优化，因为布局一般相对固定，所以减少渲染次数
const Layout = React.memo(() => {
  return (
    <div>
      <Header></Header>
      <Main></Main>
      <Footer></Footer>
    </div>
  );
});

// 2. 类组件 布局可以适当 React.PureComponent 优化，因为布局一般相对固定，所以减少渲染次数
class Layout2 extends React.PureComponent {
  render() {
    return (
      <div>
        <Header></Header>
        <Main></Main>
        <Footer></Footer>
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Layout />);
